﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>列表</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div>
        <div id="billTab" lay-filter="test"></div>
    </div>


    <!--头部工具栏-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
        </div>
    </script>

    <!--行内工具栏-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</body>
</html>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/layui/layui.all.js"></script>
<script>

    var table = null;

    layui.use(["table"], function () {

        table = layui.table;  //创建表格对象

        //渲染表格，
        table.render({
            elem: '#billTab' //指定原始表格元素选择器（推荐id选择器）
            , id: "tabTest"
            , url: '/Bill/GetBillList' //数据接口get
            , page: true //开启分页
            , height: "full"
            , toolbar: "#toolbarDemo"
            , cols: [[ //表头
                { type: "checkbox", width: 100, fixed: "left" }
                , { field: 'Title', title: '标题', width: 200 }
                , {
                    field: 'Bill_time', title: '记账时间', width: 200,
                    templet: function (d) {
                        return formartDateTime(d.Bill_time)
                    }
                }
                , { field: 'TypeName', title: '类别', width: 200 }
                , { field: 'Price', title: '金额', width: 200 }
                , { field: 'Explain', title: '说明', width: 200 }
                , { width: 150, toolbar: "#barDemo", fixed: "right" }
            ]]
        });

        //监听头部工具栏事件
        table.on('toolbar(test)', function (obj) {

            var checkStatus = table.checkStatus(obj.config.id);

            switch (obj.event) {
                case 'add':
                    openWindow("/Bill/Edit");
                    break;
                case 'delete':
                    deleteBatch(checkStatus.data);
                    break;
            };
        })


        //行内事件
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    layer.close(index);
                    //向服务端发送删除指令
                    deleteBill(data.Id);
                });
            } else if (layEvent === 'edit') { //编辑
                openWindow("/Bill/Edit/" + data.Id);
            }
        });
    })

    function deleteBatch(arr) {
        if (arr == null || arr.length == 0) {
            layer.alert("请选择删除的行！")
            return
        }

        layer.confirm('是否确认删除?', { icon: 3, title: '提示' }, function (index) {

            $.post("/Bill/DeleteBatchBills", { bills: arr })
                .then(res => {
                    if (res > 0)
                        table.reload("tabTest")
                })

            layer.close(index);
        });

    }

    function openWindow(url) {
        layer.open({
            id: "idTest"
            , type: 2
            , title: "账单信息"
            , content: url
            , area: ['700px', '450px']
        });
    }

    function formartDateTime(val) {
        if (val != null) {
            var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
            //月份为0-11，所以+1，月份小于10时补个0
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            var dd = date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minute + ":" + second;

            return dd;
        }

        return "";
    }

    function deleteBill(id) {
        $.post("/Bill/Delete", { id })
            .then(res => {
                if (res > 0) {
                    var index = layer.alert("保存成功！", { icon: 1 }, function () {
                        table.reload("tabTest");
                        layer.close(index);
                    })
                }
            })
    }
</script>